 <template>
  <el-container>
    <el-header>
      <div class="header-container">
        <div class="header">
          <div>
            <img src="../../images/logo-white.png" class="logo" alt>
          </div>
        </div>

        <div class="btn-container">
          <span @click="showLogin">登录</span>
          <span>|</span>
          <span @click="showRegister">注册</span>
        </div>
      </div>
    </el-header>
    <el-main>
      <div class="content">
        <!-- 登录 -->
        <div v-if="showModel === 'login'">
          <Login :showModel="showModel" :changeModel="changeModel"></Login>
        </div>

        <!-- 企业注册 -->
        <div v-if="showModel === 'register'">
          <Register :showModel="showModel" :changeModel="changeModel"></Register>
        </div>

        <div class="footer">
          <div v-show="showModel === 'login'">
            网站新用户？
            <span @click="changeModel" style="color: #409EFF;cursor: pointer">注册账户</span>
          </div>

          <div v-show="showModel === 'register'">
            已经是平台用户 ?
            <span @click="changeModel" style="color: #409EFF;cursor: pointer">登录</span>
          </div>

          <div>爱灵格 Xlingual</div>
          <div>©2017 All Rights Reserved.</div>
          <div>Study Language As Mother Language</div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
 
<script>
import Login from "./components/login.vue";
import Register from "./components/register.vue";

export default {
  data() {
    return {
      showModel: "login", // 显示注册【register】/登录【login】切换
    };
  },
  components: { Login, Register },
  methods: {
    changeModel: function() {
      this.showModel = this.showModel === "login" ? "register" : "login";
    },
    showLogin: function() {
      this.showModel = "login";
    },
    showRegister: function() {
      this.showModel = "register";
    }
  },
  mounted() {
    if (this.$route.query.redirect) {
      this.$message.error("过久未操作，请重新登录");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.el-container {
  background: #fff;
  height: 100%;
}
// --------------header-------------

.header-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  line-height: 60px;
  height: 60px;
  width: 100%;
  background: #1fc3b3;

  .logo {
    position: absolute;
    top: 10px;
    left: 30px;
    height: 40px;
    display: block;
  }

  .btn-container {
    position: absolute;
    top: 10px;
    right: 30px;
    color: #fff;
    line-height: 40px;
  }
  .btn-container > span {
    cursor: pointer;
  }
}
// --------------header-------------

.el-main {
  background: #fff;
  height: 100%;
}
.content {
  width: 100%;
  min-height: 100%;

  .el-form-item {
    margin-bottom: 8px;
  }
  div {
    color: #999;
    padding: 4px 0;
  }

  .code-style {
    width: 178px;
  }

  .footer {
    text-align: center;
    margin-top: 50px;
  }
}
</style>
